<template>
  <view class="info-wrapper" :style="{paddingTop: `${getSystemInfo.navBarHeight}px`}">
    <navBar title="完善信息" :customBack="true" @back="handleBack" @home="handleHome" />
    <view class="content-wrapper">
      <view class="hint">
        <text>您的姓名</text>
      </view>
      <view class="form">
        <u--form labelPosition="left" label-width="8px" ref="formRef" :model="formData">
          <u-form-item prop="name">
            <u--input border="bottom" placeholder="请输入您的姓名，更好的服务您" clearable v-model="formData.name" />
          </u-form-item>
          <u-button type="primary" text="确认" :custom-style="{ margin: '50rpx 0 0' }" @click="onSubmit"></u-button>
          <text class="jump" @click="onJump">跳过</text>
        </u--form>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapState,
    mapMutations
  } from 'vuex'
  import navBar from '@/components/navBar.vue'

  export default {
    components: {
      navBar,
    },
    data() {
      return {
        formData: {
          name: ''
        },
        rules: {
          name: [
            {
              required: true,
              message: '请输入姓名',
            }
          ]
        }
      }
    },
    computed: {
      ...mapGetters('global', ['getSystemInfo']),
    },
    methods: {
      handleBack() {
        uni.switchTab({
          url: '/pages/mine/home'
        })
      },
      handleHome() {
        uni.switchTab({
          url: '/pages/index/index/index'
        })
      },
      async onSubmit() {
        await this.$refs.formRef.validate()
        this.$request({
          method: 'POST',
          url: '/user-center/app/users/updateInfo',
          data: { name: this.formData.name }
        }).then((res) => {
          if (res && res.respCode === 200) {
            let _this = this
            _this.$refs.uToast.show({
              message: '设置成功',
              complete() {
              	_this.onJump()			
              }
            })
          }
        }).catch((e) => {
          console.log('设置名称失败', e)
        })
      },
      onJump() {
        uni.switchTab({
          url: '/pages/index/index/index'
        })
      },
    },
    onLoad(option) {
      console.log('option',option)
    },
    onReady() {
      this.$refs.formRef.setRules(this.rules)
    }
  }
</script>

<style lang="scss" scoped>
  .info-wrapper {
    .content-wrapper {
      padding: 80rpx 65rpx 0;
      height: 100vh;
      background: #fff;
      display: flex;
      box-sizing: border-box;
      flex-direction: column;

      .hint {
        display: flex;
        flex-direction: column;
        font-size: 48rpx;
        line-height: 2;
        margin-bottom: 20rpx;
      }

      .jump {
        display: flex;
        justify-content: center;
        margin: 40rpx 0;
      }
    }
  }
</style>